<html>
  <head>
    <title>Plus: very basic sample</title>
    <style>
      @import url(../plus.css); /* the only thing needed to include Plus framework */
      @import url(../../note.css); 
      
      span { display:inline-block; border:1dip solid; margin: 4dip; }

    </style>
    
    <script type="text/tiscript">
      
  
      namespace Data // our model
      {  
        var objects =
        [
          {
            name: "Group A",
            nestedObjects: [  { id: 1, name:"aaa" },
                              { id: 2, name:"bbb" } ]
          },
          {
            name: "Group B",
            nestedObjects: [  { id: 3, name:"ccc" },
                              { id: 4, name:"ddd" },
                              { id: 5, name:"eee" } ]
          }
        ];
      }
      
    </script>
  </head>

<body model="Data"> <!-- define data model we observe -->

  <note><p>Repeatable hosting other ( nested ) repeatable.</p></note>

  <!-- the repeateable section -->
  <div repeat="object in objects">
    <!-- nested repeatable -->
    <header(object.name) />
    <span(nestedObject.name) repeat="nestedObject in object.nestedObjects" />
    <footer>After</footer>
  </div>  
  
</body>
</html>
